<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券详情页</title>
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../css/base.css">
    <!-- 公共媒体文件 -->
    <link rel="stylesheet" href="../../css/media.css">
    <!-- 字体样式 -->
    <link rel="stylesheet" href="../../css/font-style.css">
    <!-- 当前页面样式 -->
    <link rel="stylesheet" href="../../css/couponprodict.css">
    <!-- layer样式文件 -->
    <link rel="stylesheet" href="../../lib/layer/theme/default/layer.css">
    <script type='text/javascript' src='../../lib/template/template.js'></script>
    <script type='text/javascript' src='../../lib/jquery/jquery.min.js'></script>
    <!-- layer插件 -->
    <script type='text/javascript' src='../../lib/layer/layer.js'></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <header>
            <!-- 返回上一页 -->
            <a href="javascript:;" class="go-back">
                <span class="icon-arrow_lift"></span>
            </a>
            <!-- 标题 -->
            <div class="title"></div>
            <!-- <span>头部</span> -->
            <a href="javascript:;">
                <img src="../../images/header_app.png" alt="">
            </a>
        </header>
    </div>
    <!-- 小提示 -->
    <div class="hint">
        --点餐前出示手机中的优惠卷，即可享受优惠--
    </div>

    <!-- 优惠卷列表页 -->
    <div class="coupon-list">

    </div>
    <!-- 图片弹出层 -->
    <div class="photo">

    </div>
    <!-- 底部 -->
    <footer>
        <div class="foot_tool">
            <a href="javascript:;">登录</a>
            <a href="javascript:;">注册</a>
            <a href="#">返回顶部</a>
        </div>
        <div class="foot_content">
            <a href="javascript:;">手机APP下载
                <span>慢慢买手机版</span>
            </a>
            <span>--掌上比价平台</span>
            <p>m.manmanbuy.com</p>

        </div>
    </footer>
</body>

</html>
<!-- 优惠卷列表页模板 -->
<script type='text/template' id="listTmp">
    <ul>
        {{each result as val key}}
            <li>
                <a href='javascript:;' >
                    <div class="row clearfix">
                        <span class='img'> {{val.couponProductImg}}</span>
                        <div class="content">
                            <span> {{val.couponProductName}}</span>
                            <em>{{val.couponProductPrice}}</em>
                        </div>  
                    </div>
                    <p>{{val.couponProductTime}}</p>
                    <span class="icon-arrow-right"></span>
                </a>
            </li>
        {{/each}}
    </ul>
</script>
<script>
    var param = window.location.search;
    //获取标题
    var data = param.match(/title=(.*)/)[1];
    //转码
    var title = decodeURI(decodeURI(data));

    $('.title').text(title + '优惠卷');
    //返回上一页
    $('.go-back').click(function () {
        window.history.go(-1);
    });
    var id = param.match(/\d+/)[0];
    //获取优惠卷
    $.ajax({
        type: "get",
        url: "http://193.112.55.79:9090/api/getcouponproduct",
        data: {
            couponid: id
        },
        dataType: "json",
        success: function (res) {

            template.config("escape", false);

            var htmlStr = template('listTmp', res);

            $('.coupon-list').html(htmlStr);


            //保存所有图片
            var photoData = [];

            $.each($('.img').children(), function (index, val) {
                var phonts = {
                    alt: $(this).attr('alt'),
                    pid: index,
                    src: $(this).attr('src'),
                    thumb: ''
                };

                photoData.push(phonts);
            })


            //图片弹出层
            $('.coupon-list').on('click', 'li', function () {
                var photosJSON = {
                    title: "优惠卷图片",
                    id: "photo",
                    start: $(this).index(),
                    data: photoData
                }
                layer.photos({
                    photos: photosJSON //格式见API文档手册页
                        ,
                    anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            });
        }
    });
</script>